<template>
  <div class="show-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/page' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/page/group' }">小组列表</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `/page/group/groupdetail/${groId}` }" >组内空间</el-breadcrumb-item>
    <el-breadcrumb-item>文章详情</el-breadcrumb-item>
  </el-breadcrumb>
  <el-tooltip class="item" effect="dark" content="点击返回组内空间" placement="right-end">
                  <el-button class="goback" type="warning"  icon="el-icon-back" @click="back"></el-button>
          </el-tooltip>
    <!-- 内容部分 -->
    <el-row :gutter="20">
      <el-col :span="24" class="row-img">
        <div class="grid-content bg-purple">
            <div class="background-box">
              <img :src="itemlist.cover" class="cover" />
            </div>

          <el-card class="box-card-user">
            <div class="disrc">
              <el-avatar shape="square" class="user-acear" :src="itemlist.userpic"></el-avatar>
              <div class="avatar-title">
              <span class="avant-name">{{ itemlist.nickname }}</span>
              <span class="avatar-creat">{{ itemlist.creator }}</span>
              </div>
            </div>
          </el-card>

        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="22" v-loading="loading" class="Artic">
        <el-card class="box-card-left">
          <div slot="header" class="clearfix">
            <span class="docname">{{ itemlist.docname }}</span>
            <!-- 下拉菜单 -->
            <el-dropdown style="float: right; padding: 3px 0">
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="menu">
                <el-dropdown-item command="a" @click.native="deleteDoc">删除</el-dropdown-item>
                <el-dropdown-item command="b"  @click.native="editDoc">编辑</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="text item">
            <div class="grid-content bg-purple">
              <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                  </template>
                  {{ itemlist.nickname }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    创建时间
                  </template>
                  {{ itemlist.createtime | dateFmt }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    类别
                  </template>
                  <el-tag size="small" type="success">{{itemlist.identity ? itemlist.identity : '文档'}}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div
              class="show-content markdown-body"
              v-html="itemlist.content"
            ></div>
          </div>
        </el-card>
         <el-card class="box-card-right">
            <div slot="header" class="clearfix-right">
            <span class="docname-right">组内作品推荐</span>
          </div>
          <div v-for="item in otherArtic" :key="item.id">
            <el-card shadow="hover" class="other-artic" :title="item.docname" @click.native="otherArtics(item.id)">
              <img :src="item.cover" alt="" class="other-img">
              <div class="other-title">
              <span class="other-name">{{ item.nickname }}</span>
              <span class="other-title" >{{ item.docname | ellipsis}}</span>
            </div>
            </el-card>
            <el-divider></el-divider>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import 'github-markdown-css/github-markdown.css'
import { getArchive, deleDoc, allDocs } from '@/utils/api/group.js'
import moment from 'moment'

export default {
  inject: ['reload'],
  name: '',
  components: {},
  props: {
    listId: {
      required: true
    },
    groId: {
      require: true
    }
  },
  data () {
    return {
      itemlist: {},
      loading: true,
      otherArtic: []
    }
  },
  filters: {
    // 超出一定字数显示省略号的过滤器
    ellipsis (val) {
      if (!val) return ''
      if (val.length > 6) {
        return val.slice(0, 6) + '...'
      }
      return val
    },
    // 格式化时间的过滤器
    dateFmt (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },

  created () {
    // 获取文章
    this.loadArchive()
    this.GetAllartic()
  },
  methods: {
    // 随机获取该组作品的随机3个
    GetAllartic () {
      allDocs(this.groId).then(res => {
        const len = res.data.data.length;
        let r;
        for (let i = 0; i < 3; i++) {
          r = Math.floor(Math.random() * len)
          this.otherArtic.push(res.data.data[r])
        }
        console.log(this.otherArtic);
      })
    },
    async loadArchive () {
      const { data: res } = await getArchive(this.listId)
      this.itemlist = res.data
      this.loading = false
    },
    // 删除文档
    deleteDoc () {
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      if (user.username === this.itemlist.creator) {
      // 发起删除请求
        deleDoc(this.itemlist.id).then(res => {
          this.$router.push('/page/group/groupdetail/' + this.groId)
          this.$notify({
            title: '成功',
            message: '删除文档成功',
            type: 'success'
          });
        })
      } else {
        this.$message('你不能删除别人的文章')
      }
    },
    // 编辑文档
    editDoc () {
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      if (user.username === this.itemlist.creator) {
        this.$router.push('/page/group/writeArticle/' + this.listId + '/' + this.groId)
      } else {
        this.$message('你不能编辑别人的文章')
      }
    },
    otherArtics (arcId) {
      console.log(arcId);
      this.$router.push('/page/group/page/group/articleshow/' + arcId + '/' + this.groId)
      location.reload()
    },
    // 返回小组
    back () {
      this.$router.push('/page/group/groupdetail/' + this.groId)
    }
  }
}
</script>

<style lang="less" scoped>
.markdown-body {
  box-sizing: border-box;
  min-width: 200px;
  max-width: 980px;
  margin: 0 auto;
  padding: 45px;
}
.show-container{
  position: relative;
}
@media (max-width: 767px) {
  .markdown-body {
    padding: 15px;
  }
}
.row-img{
  margin-bottom: 5%;
  text-align: center;
  position: relative;
  background-color: transparent;
  .background-box{
  width: 90%;
  height: 200px;
  position: relative;
  left: 50%;
  overflow: hidden;
  margin-left: -45%;
  .cover {
  position:absolute;
  bottom: -60%;
  left: 0;
  width: 100%;
  height: 500px;
}
}
}
.other-artic{
  cursor: pointer;
  /deep/.el-card__body{
    padding: 0;
  }
  .other-img{
    padding: 8px;
    float: left;
    width: 120px;
    height: 70px;
    margin-right: 10px;
  }
  .other-title{
      letter-spacing: 1px;
    padding-top: 10px;
    padding-left: 8px;
    .other-name{
      display: block;
      margin: 8px 0;
      font-size: 14px;
      color: #aaa;
    }
    .other-title{
      display: block;
      color: #000;
      font-size: 16px;
    }
  }
}
/deep/.left {
  margin-top: 20px;
  -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/
  box-shadow: 2px 2px 10px #909090; /*opera或ie9*/
  .el-card__body {
    padding: 0;
    border: none;
  }
}
.el-card.is-always-shadow{
  box-shadow: none;
}
.el-row {
  position: relative;
  margin-top: 25px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  position: relative;
}
.el-image {
  -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/
  box-shadow: 2px 2px 10px #909090; /*opera或ie9*/
}
.box-card-left {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 10%;
  -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/
  box-shadow: 2px 2px 10px #909090; /*opera或ie9*/
}
.box-card-right {
  width: 30%;
  margin: 0 auto;
  margin-bottom: 10%;
  -moz-box-shadow: 2px 2px 10px #909090; /*firefox*/
  -webkit-box-shadow: 2px 2px 10px #909090; /*safari或chrome*/
  box-shadow: 2px 2px 10px #909090; /*opera或ie9*/
}
.box-card-user{
  width: 16%;
  position: absolute;
  right: 10%;
  bottom: -20%;
    .disrc {
      text-align: left;
    align-items: center;
    display: flex;
    border: none;
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
    .user-acear{
      width: 60px;
      height: 60px;
      margin-right: 5%;
    }
    .avatar-title{
      text-align: center;
      .avant-name{
        display: block;
        letter-spacing: 4px;
        margin-bottom: 10px;
      }
      .avatar-creat{
        margin-top: 3px;
        font-size: 15px;
        color: #aaa;
      }
    }
    span{
      font-size: 20px;
    }
  }

}
.Artic{
  margin:0 5%;
  display: flex;
}
.clearfix {
  text-align: center;
  .docname {
    font-size: 20px;
    font-weight: bold;
  }
}
.clearfix-right {
  .docname-right {
    font-size: 20px;
    color: #aaa;
  }
}
.goback{
  width: 8%;
  position: absolute;
  top: 50px;
  z-index: 999;
  left: 30px;

  font-size: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: orange;
}

.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-dropdown-menu__item{
  color: orange;
}
</style>
